<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    <title>validator</title>
    <link rel="stylesheet" type="text/css" href="../example.css" />
</head>
<body>
<div id="doc4">
  <div class="hd">
    <div class="hd-title">validator example:</div>
  更详细API，请参见 <a href="../jsdoc/symbols/__.widget.Validator.html">../jsdoc/symbols/__.widget.Validator.html</a>
    <h1>code:</h1>
<pre>
</pre>
  </div>
  <!-- start:bd -->
  <div class="hd">
    <div id="container">
      <form id="test-form1" class="testForm" name="test-form1a" action="http://www.baidu.com" method="get"> 
        <dl> 
          <dt>&nbsp;</dt><dd><input id="clearAll" type="button" value="Clear All"/><input type="submit" value="Submit"/></dd> 
          <dt>Min length:</dt><dd><input type="text" name="test-form1-name" value="min length=6" /><span>&nbsp;Please input</span></dd> 
          <dt>Not empty:</dt><dd><input type="text" name="test-form1-pwd" title="Password" value="any char is ok" /><span>&nbsp;Put your instruction here</span></dd> 
          <dt>Allow Empty:</dt><dd><input type="text" name="test-form1-allow-empty" class="st-validate-not-required" /></dd> 
          <dt>Date(YYYY-mm-dd):</dt><dd><input type="text" name="test-form1-date" title="The Date" value="2000-02-12" /></dd> 
          <dt>Date(mm/dd/YYYY):</dt><dd><input type="text" class="st-validate-date" name="test-form1-name2" value="11/12/2000" /></dd> 
          <dt>Min value:</dt><dd><input type="text" name="test-form1-name3" value="10" alt="Name 2" /></dd> 
          <dt>Max value:</dt><dd><input type="text" name="test-form1-name4" value="10" /></dd> 
          <dt>Max Length:</dt><dd><input type="text" name="test-form1-name5" value="123456" /></dd> 
          <dt>Min Length:</dt><dd><input type="text" name="test-form1-name6" value="123456789" /></dd> 
          <dt>Phone:</dt><dd><input type="text" name="test-form1-name7" class="st-validate-phone" value="010-88888888-123" /></dd> 
          <dt>Mobile:</dt><dd><input type="text" name="test-form1-name8" class="st-validate-mobile" value="13512345678" title="Mobile phone" /></dd> 
          <dt>Yid:</dt><dd><input type="text" name="test-form1-name9" class="st-validate-yid" value="stauren@yahoo.cn" title="Yid" /></dd> 
          <dt>Ajax Fail:</dt><dd><input type="text" name="test-form1-name10" value="123456WWW" /><span>&nbsp;Input number only</span></dd> 
          <dt>Ajax OK:</dt><dd><input type="text" name="test-form1-name11" value="abcdef" /><span>&nbsp;Input "abcdef"</span></dd> 
          <dt>Integer Only:</dt><dd><input type="text" name="test-form1-name12" class="st-validate-int" value="1234.5" /></dd> 
          <dt>Number Only:</dt><dd><input type="text" name="test-form1-name13" class="st-validate-number" value="-0.05e-8" /></dd> 
          <dt>English Only:</dt><dd><input type="text" name="test-form1-name14" class="st-validate-alpha" value="abcdef" /></dd> 
          <dt>English & Integer:</dt><dd><input type="text" name="test-form1-name15" class="st-validate-alphanum" value="abcd123_" /><span>&nbsp;Underscore(_) is also accepted</span></dd> 
          <dt>Email:</dt><dd><input type="text" name="test-form1-name16" class="st-validate-email" value="stauren.test@stauren.net" /></dd> 
          <dt>Url:</dt><dd><input type="text" name="test-form1-name17" class="st-validate-url" value="http://stauren.net/tags/stauren" /></dd> 
          <dt>Chinese(汉字):</dt><dd><input type="text" name="test-form1-name18" class="st-validate-chinese" value="只允许汉字" /></dd> 
          <dt>Postal Code:</dt><dd><input type="text" name="test-form1-name19" class="st-validate-postal" value="100871" /></dd> 
          <dt>Radio:</dt><dd><input type="radio" name="test-form1-name20" value="1" />Radio 1&nbsp;<input type="radio" name="test-form1-name20" value="2" />Radio 2&nbsp;<input type="radio" name="test-form1-name20" class="st-validate-needed" value="3" />Radio 3&nbsp;<span>&nbsp;| only Choose 3 could pass</span></dd> 
          <dt>Checkbox:</dt><dd><input type="checkbox" name="test-form1-name21" value="1" />Radio 1&nbsp;<input type="checkbox" name="test-form1-name21" class="st-validate-needed" class="st-validate-needed" value="2" />Radio 2&nbsp;<input type="checkbox" name="test-form1-name21" value="3" />Radio 3&nbsp;<span>&nbsp;| must Choose 2 to pass</span></dd> 
          <dt>Selection:</dt><dd><select name="test-form1-name22"> 
            <option value="100">100</option> 
            <option value="1000">1000</option> 
            <option value="10000">10000</option> 
            <option value="100000">100000</option> 
            <option value="1000000">1000000</option> 
            <option value="10000000">10000000</option> 
          </select><span>&nbsp;</span></dd> 
          <dt>Use group:</dt><dd><input type="text" name="test-form1-name23" value="1980" class="st-validate-int" /><select name="test-form1-name24"> 
            <option value="1">Jan</option> 
            <option value="2">Feb</option> 
            <option value="3">Mar</option> 
            <option value="4">Apr</option> 
            <option value="5">May</option> 
            <option value="6">Jun</option> 
            <option value="7">Jly</option> 
            <option value="8">Aug</option> 
            <option value="9">Sep</option> 
            <option value="10">Oct</option> 
            <option value="11">Nov</option> 
            <option value="12">Dec</option> 
          </select><input type="text" name="test-form1-name25" value="1" class="st-validate-int" /><span>Input birthday</span></dd> 
          <dt>DIY error msg:</dt><dd><input type="text" name="test-form1-name26" value="12345" /></dd> 
          <dt>Use config class(number):</dt><dd><input type="text" name="test-form1-name27" value="123.45a" /></dd> 
          <dt>Use alter:</dt><dd><input type="text" name="test-form1-name28" value="" /><input type="text" name="test-form1-name29" value="" /></dd> 
          <dt>Description:</dt><dd><textarea name="test-form1-desc" id="test-form1-desc-id" title="描述">Not empty is ok</textarea></dd> 
          <dt>&nbsp;</dt><dd><input type="submit" value="Submit"/></dd> 
        </dl> 
      </form> 
    </div>
  </div>
  <!-- end:bd -->
</div>
<script>
__ = {
  cfg : [undefined, true, '0', 'http://localhost/att/workspace/os/svn']
};
</script>
<script src="http://localhost/att/workspace/os/svn/trunk/src/loader/loader.js"></script>
<script>
__.load(['yui core validator','validator_css'], function() {
  var _ = __._;
  var _oValidator = new __.widget.Validator('test-form1', {
    notifyType:'tips', // default tips
    stopOnFirst : false,
    onSubmit : true, //default true, intervene the on submit event
    checkOnBlur : true, //default true, check an input when it losts focus
    hideSuccess : false // default false
  });
  _oValidator.addRules({
    'test-form1-name' : {
      desc : '姓名',
      maxLength : 15,
      minLength : 6
    },
    'test-form1-pwd' : {
      maxLength : 15,
      minLength : 5
    },
    'test-form1-date' : {
      mask : /^[12]\d{3}\-[01]\d\-[0-3]\d$/
    }
    ,
    'test-form1-name3' : {
      minValue : 999999
    }
    ,
    'test-form1-name4' : {
      maxValue : 2
    }
    ,
    'test-form1-name5' : {
      maxLength : 5
    },
    'test-form1-name6' : {
      minLength : 10
    },
    'test-form1-name10' : {
      ajax : 'demo_ajax.php?test=1&value='
    }
    ,
    'test-form1-name11' : {
      ajax : 'demo_ajax.php?test=2&value='
    }
    ,
    'test-form1-name22' : {
      minValue : 999999
    }
    ,
    'test-form1-name23' : {
      minValue : 1900,
      maxValue : 2008,
      group: ['test-form1-name24', 'test-form1-name25']
    }
    ,
    'test-form1-name25' : {
      minValue : 1,
      maxValue : 31
    },
    'test-form1-name26' : {
      maxValue : 1,
      errorMessage: 'You could define your own error message.'
    },
    'test-form1-name27' : {
      predefined : ['number']
    },
    'test-form1-name28' : {
      alter : 'test-form1-name29'
    },
    'test-form1-name29' : {
      alter : 'test-form1-name28'
    }
  });
  _oValidator.validate();
  _.on('clearAll', 'click', _oValidator.clearAll, _oValidator, true);
});
</script>
</body>
</html>

